import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:riverpod_t/base/base_consumer_widget.dart';
import 'package:riverpod_t/page/car/river/car_detail_river.dart';
import 'package:riverpod_t/page/car/state/car_detail_state.dart';
import 'package:riverpod_t/page/car/widget/article_nav_widget.dart';
import 'package:riverpod_t/page/car/widget/article_web_widget.dart';
import 'package:riverpod_t/widget/custom_button.dart';
import 'package:status_bar_control/status_bar_control.dart';
import '../../../base/base_stateful_page.dart';

class CarDetailPage extends BasePage {
  final int entityId;
  const CarDetailPage({super.key, required this.entityId});

  @override
  BasePageState<BasePage> getState() => _CarDetailPageState();
}

class _CarDetailPageState extends BasePageState<CarDetailPage> {
  Widget left() {
    return const SizedBox();
  }

  @override
  void initState() {
    super.initState();
    showAppBar = false;
    pageBackgroundColor = const Color(0xFFF3F4F8);
    Future.delayed(const Duration(milliseconds: 100)).then((value) async {
      StatusBarControl.setStyle(StatusBarStyle.DARK_CONTENT);
    });
  }

  /// 评论
  Widget commitWidget() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 18.w),
      margin: EdgeInsets.only(right: 18.w),
      width: 200.w,
      height: 30.h,
      decoration: BoxDecoration(
        color: const Color(0xFFF6F9FF),
        borderRadius: BorderRadius.all(Radius.circular(35.h)),
      ),
      child: Text('想说点什么..', style: TextStyle(fontSize: 12.sp, color: const Color(0xFF999999))),
    );
  }

  /// 点赞
  Widget zanWidget() {
    return Consumer(
      builder: (context, ref, state) {
        final isLike = ref.watch(
          carDetailRiverProvider(
            widget.entityId,
          ).select((state) => (state.value?.model?.isLike ?? false)),
        );

        return CustomButton(
          onPressed: () {
            ref.read(carDetailRiverProvider(widget.entityId).notifier).addLike();
          },
          iconName: "assets/images/zan_nonal.png",
          iconHeight: 18.w,
          iconWidth: 18.w,
          iconColor: isLike ? Colors.red : Colors.blueGrey,
          iconFit: BoxFit.fitWidth,
          text: '点赞',
          textStyle: TextStyle(fontSize: 12.sp, color: const Color(0xFF999999)),
        );
      },
    );
  }

  Widget articleTooWidget() {
    return Container(
      width: 1.sw,
      height: 60.h,
      padding: EdgeInsets.only(left: 18.w, right: 18.w),
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [commitWidget(), zanWidget()],
      ),
    );
  }

  @override
  Widget buildPage(BuildContext context) {
    return BaseConsumerWidget<CarDetailState>(
      provider: carDetailRiverProvider(widget.entityId),
      builder: (context, state, ref) {
        return Stack(
          children: [
            Padding(
              padding: EdgeInsets.only(
                top: statusBarHeight + kToolbarHeight,
                bottom: bottomSafeAreaHeight + 60.h,
              ),
              child: ArticleWebWidget(htmlStr: state.model?.newsContent ?? ''),
            ),

            Positioned(child: ArticleNavWidget(infoListModel: state.model)),
            Positioned(bottom: bottomSafeAreaHeight, child: articleTooWidget()),
          ],
        );
      },
    );
  }
}
